<template>
  <div class="login" id="login-app">
    <div class="login-box">
      <img src="../../assets/images/login/login-l.png" alt="">
      <div class="login-form">
        <el-form ref="loginForm" :model="loginForm" :rules="loginRules">
          <div class="login-form-title">
            <img src="../../assets/images/login/login-logo.png" style="width:150px;height:150px;" alt="" />
          </div>
          <el-form-item prop="username">
            <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号" maxlength="20"
              prefix-icon="el-icon-s-custom" />
          </el-form-item>
          <el-form-item prop="password">
            <el-input v-model="loginForm.password" type="password" placeholder="密码" prefix-icon="el-icon-lock"
              maxlength="20" @keyup.enter.native="handleLogin" />
          </el-form-item>
          <div style="display: flex; justify-content: space-between; margin-top: 15px; margin-bottom: 10px">
            <el-link type="primary" href="sign.html">注册</el-link>
            <el-link type="primary" href="forget.html">忘记密码</el-link>
          </div>
          <el-form-item style="width:100%;">
            <el-button :loading="loading" class="login-btn" size="medium" type="primary" style="width:100%;"
              @click.native.prevent="handleLogin">
              <span v-if="!loading">登录</span>
              <span v-else>登录中...</span>
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<style>
@import '../../plugins/element-ui/index.css';
@import '../../assets/styles/login.css';
@import '../../assets/styles/common.css';
</style>
<script>

import { loginApi } from "../../api/login.js";



export default {
  data() {
    return {
      loginForm: {
        username: '',
        password: ''
      },
      loading: false
    }
  },
  computed: {
    loginRules() {
      const validateUsername = (rule, value, callback) => {
        if (value.length < 1) {
          callback(new Error('请输入用户名'))
        } else {
          callback()
        }
      }
      const validatePassword = (rule, value, callback) => {
        if (value.length < 6) {
          callback(new Error('密码必须在6位以上'))
        } else {
          callback()
        }
      }
      return {
        'username': [{ 'validator': validateUsername, 'trigger': 'blur' }],
        'password': [{ 'validator': validatePassword, 'trigger': 'blur' }]
      }
    }
  },
  created() {
  },
  methods: {
    async handleLogin() {
      this.$refs.loginForm.validate(async (valid) => {
        if (valid) {
          this.loading = true
          let res = await loginApi(this.loginForm)
          if (String(res.code) === '1') {
            localStorage.setItem('userInfo', JSON.stringify(res.data))
            // 使用Vue Router导航到'/index'页面

            this.$router.replace({ name: 'index' });
          } else {
            this.$message.error(res.data.msg)
            this.loading = false
          }
        }
      })
    }
  }
}
</script>

<style scoped>
.body {
  min-width: 1366px;
}</style>
